<template>
<div>
  <div class="flex titleRow">
    <div class="columnLine"></div>
    <span class="title fs4" @click="goBack">公司名称 > </span>
    <span class="title fs4">{{department}}</span>
  </div>
  <div class="personRow flex flex-between"
       v-for="(item,index) in afterPersonList" :key="'person'+index"
       @click="onPersonClick(index)">
    <div class="flex">
      <img class="img marginAuto0" src="@/assets/img/mail_photo.png">
      <p class="text fs4 marginAuto0">{{department}} {{item.name}}</p>
    </div>
    <img class="chose marginAuto0" src="@/assets/img/chose.png"
         v-show="currentIndex===index">
  </div>
</div>
</template>

<script>
import {personSelectList} from "../../data/personalSelection";

export default {
  name: "departmentDetail",
  data(){
    return{
      personList:personSelectList.personList,
      currentIndex:-1,
      department:"某某部门",
      afterPersonList:[]
    }
  },
  methods:{
    onPersonClick(index){
      this.currentIndex=index;
    },
    goBack(){
      this.$router.back();
    }
  },
  created() {
    this.department=this.$route.query.department;

    let personInDepartment=[];
    let departmentInData=this.department
    let personList=this.personList;
    personInDepartment.push(personList.filter(function (n){return n.department===departmentInData;}))
    this.afterPersonList.push(...personInDepartment[0])
  }
}
</script>

<style lang="less" scoped>
.titleRow{
  background-color: #F5F5F5;
  padding: .3rem .4rem;
  .columnLine{
    width: .12rem;
    height: .5rem;
    background-color: #409EFF;
    margin:0.05rem .2rem 0 0;
  }
  .title{
    color: #409EFF;
  }
}
.personRow{
  padding: .35rem .4rem;
  border-bottom: .01rem solid #F5F5F5;
  .img{
    width: .65rem;
    height: .65rem;
    margin-right: .2rem;
  }
  .chose{
    width: .4rem;
    height: .4rem;
  }
}
</style>